<template>
  <div>
    <van-row type="flex">
      <van-col span="1"> </van-col>
      <van-col span="4">
        <van-button type="primary" size="small" @click="onAddRole"
          >增加角色</van-button
        >
      </van-col>
      <!-- <van-col span="4">
        <van-button type="danger" size="small" @click="onDelRole"
          >删除角色</van-button
        >
      </van-col> -->
      <van-col span="4">
        <van-button type="info" size="small" @click="onSave"
          >保存权限</van-button
        >
      </van-col>
    </van-row>
    <div style="display: flex">
      <van-sidebar v-model="active" @change="onChange" v-if="roles.length > 0">
        <van-sidebar-item
          v-for="item in roles"
          :title="item.name"
          :key="item.id"
        />
      </van-sidebar>

      <van-checkbox-group
        v-model="role.permissions"
        ref="checkboxGroup"
        @change="onPermsChange"
      >
        <van-checkbox
          v-for="item in permissions"
          :name="item.id"
          :key="item.id"
          >{{ item.name }}</van-checkbox
        >
      </van-checkbox-group>
    </div>
    <van-dialog
      v-model="show"
      title="增加角色"
      :show-confirm-button="false"
      message="真的要取消吗？"
      @confirm="onConfirm"
      @close="onClose"
      confirmButtonText="保存"
      showCancelButton
    >
      <van-form @submit="onSubmit">
        <van-field
          v-model="roleForm.name"
          name="name"
          label="角色名"
          placeholder="角色名"
          :rules="[{ required: true, message: '请填写角色名' }]"
        />
        <van-field
          v-model="roleForm.comment"
          name="comment"
          label="角色说明"
          placeholder="角色说明"
        />
        <div style="margin: 32px">
          <van-button round block type="info" native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
    </van-dialog>
  </div>
</template>

<script>
import {
  getWxRoles,
  getWxPermissions,
  addWxRole,
  updateWxRole,
} from "@/api/member";

export default {
  name: "EmployeeAuth",

  data() {
    return {
      active: -1,
      roles: [],
      role: {},
      permissions: [],
      selPerms: [],
      show: false,
      roleForm: {
        name: null,
        comment: null,
      },
      listQuery: {
        category: null,
      },
    };
  },
  computed: {},

  created() {
    this.getWxRoleList();
    this.getWxPermissionList();
  },

  methods: {
    getWxRoleList() {
      getWxRoles()
        .then((res) => {
          this.roles = res.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },

    getWxPermissionList() {
      getWxPermissions()
        .then((res) => {
          this.permissions = res.data;
          this.loading = false;
          this.finished = true; // 停止加载
        })
        .catch((error) => {
          console.log(error);
          this.$toast.fail("获取数据失败")
        });
    },

    onChange(index) {
      this.role = this.roles[index];
    },

    onPermsChange(value) {
      this.selPerms = value;
      console.log(this.selPerms);
    },

    onAddRole() {
      this.show = true;
    },

    onDelRole() {
      console.log("del");
    },

    onSave() {
      let arr = Object.keys(this.role);
      if (arr.length === 0) {
        this.$toast("请选择角色");
        return;
      }
      updateWxRole(this.role)
        .then((res) => {
          this.role = res.data;
          this.$toast.success("保存成功");
        })
        .catch(() => {
          this.$toast.fail("保存失败");
        });
    },

    onSubmit(value) {
      this.show = false;

      addWxRole(value)
        .then(() => {
          this.getWxRoleList();
          this.role = {};
        })
        .catch(() => {
          this.$toast("添加失败");
        });
    },

    onClose() {
      this.show = false;
    },

    onConfirm() {
      if (this.roleForm.name == null || this.roleForm.name == "") {
        return;
      }
    },
  },
};
</script>

<style  scoped>
.van-checkbox {
  margin: 10px 0 20px 20px;
}
</style>